<template>
  <div class="cart-page">
    <!-- 头部 -->
    <AppHeader title="饿了么 购物车" />

    <!-- 空购物车提示（可选，无商品时显示） -->
    <div class="empty-tip" v-if="cartList.length === 0">
      <!-- 替换为实际存在的图片，或删除此图片 -->
      <img
          src="@/assets/img/sj03.png"
          alt="空购物车"
          class="empty-img"
          v-if="hasEmptyCartImage"
      />
      <p>购物车空空如也～快去挑选美食吧</p>
      <button class="go-home" @click="$router.push('/')">去首页点餐</button>
    </div>

    <!-- 购物车列表 -->
    <ul class="cart-list" v-else>
      <CartItem
          v-for="(item, index) in cartList"
          :key="index"
          :img="item.img"
          :name="item.name"
          :price="item.price"
          :quantity="item.quantity"
          @change-quantity="updateQuantity"
          @remove-item="removeItem(index)"
      />
    </ul>

    <!-- 操作栏 + 结算区 -->
    <div class="cart-footer" v-if="cartList.length > 0">
      <div class="footer-left">
        <button class="clear-btn" @click="clearCart">清空购物车</button>
        <p>共 {{ cartList.length }} 件商品</p>
      </div>
      <div class="footer-right">
        <p class="total-price">总计：¥{{ totalPrice.toFixed(2) }}</p>
        <button class="checkout-btn" @click="goCheckout">去结算</button>
      </div>
    </div>

    <!-- 底部导航 -->
    <AppFooter />
  </div>
</template>

<script>
import AppHeader from '@/components/AppHeader.vue'
import AppFooter from '@/components/AppFooter.vue'
import CartItem from '@/components/CartItem.vue'

export default {
  components: {
    AppHeader,
    AppFooter,
    CartItem
  },
  data() {
    return {
      // 模拟购物车数据（可从Vuex/接口获取）
      cartList: [
        {
          img: require('@/assets/img/sp01.png'),
          name: '纯肉鲜肉（水饺）',
          price: 15,
          quantity: 3
        },
        {
          img: require('@/assets/img/sp02.png'),
          name: '虾仁三鲜水饺',
          price: 22,
          quantity: 2
        }
      ],
      // 控制空购物车图片是否显示（根据实际文件调整）
      hasEmptyCartImage: true
    }
  },
  computed: {
    totalPrice() {
      return this.cartList.reduce((sum, item) => {
        return sum + item.price * item.quantity;
      }, 0);
    }
  },
  methods: {
    // 更新商品数量
    updateQuantity({ index, newQuantity }) {
      if (newQuantity <= 0) return; // 数量不能为0或负数
      this.cartList[index].quantity = newQuantity;
    },

    // 删除单个商品
    removeItem(index) {
      this.cartList.splice(index, 1);
    },

    // 清空购物车
    clearCart() {
      if (window.confirm('确定清空购物车吗？')) {
        this.cartList = [];
      }
    },

    // 去结算（可扩展登录校验、地址选择等逻辑）
    goCheckout() {
      if (this.cartList.length === 0) {
        alert('购物车为空，无法结算');
        return;
      }
      // 跳转结算页（需提前配置 /payment 路由）
      this.$router.push('/payment');
    }
  }
}
</script>

<style scoped>
.cart-page {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 空购物车样式 */
.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20vw;
  text-align: center;
}
.empty-img {
  width: 40vw;
  margin-bottom: 5vw;
}
.go-home {
  margin-top: 5vw;
  padding: 3vw 8vw;
  background-color: #0097ff;
  color: #fff;
  border-radius: 4vw;
  font-size: 3.2vw;
}

/* 购物车列表 */
.cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 底部操作栏 */
.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 3vw 4vw;
  border-top: 1px solid #eee;
  position: fixed;
  bottom: 14vw; /* 避开底部导航高度 */
  left: 0;
  width: 100%;
}
.footer-left {
  display: flex;
  align-items: center;
}
.clear-btn {
  background-color: #ff4d4f;
  color: #fff;
  padding: 2vw 4vw;
  border-radius: 3vw;
  font-size: 3.2vw;
  margin-right: 5vw;
}
.footer-right {
  display: flex;
  align-items: center;
}
.total-price {
  font-size: 3.6vw;
  font-weight: bold;
  margin-right: 5vw;
}
.checkout-btn {
  background-color: #38ca73;
  color: #fff;
  padding: 3vw 8vw;
  border-radius: 4vw;
  font-size: 3.6vw;
}
</style>